@import 'variables.scss';

/******************************
SIDE COLUMN
*******************************/

#column-right {
  padding: $margin $margin $margin 0;
  overflow: hidden;
}

#column-left {
  padding: $margin 0 $margin $margin;
}

#column-right {
  width: $side;
  float: right;
}

#column-left {
  width: $side;
  float: left;
}

#column-right + #content {
  margin-right: $side;
}

#column-left + #content {
  margin-left: $side;
}

#column-left + #column-right + #content{
  margin-left: $side;
  margin-right: $side;
}

#column-left + span + #content {
  margin-left: $side;
}
#column-right + span + #content {
  margin-right: $side;
}
#column-left + #column-right + span + #content{
  margin-left: $side;
  margin-right: $side;
}

//Columns
.side-column {
  position: relative;
  z-index: 2;

  .heading-title, .box-heading{
    max-height: 100%;
    height: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    //border-top-left-radius: inherit;
    //border-top-right-radius: inherit;
  }

  ul, li{
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
    position: relative;
  }
  .box{
    margin-bottom: $margin;
    //overflow: hidden;
    &:last-of-type{
      margin-bottom: 0;
    }
  }
  .box-content > div,
  .box-category{
    overflow: hidden;
  }
  //Box Content
  .box-content{
    p{
      padding: 10px;
      text-align: left;
      line-height: 1.4;
      margin-bottom: 0;
    }
    p + select{
      margin-bottom: 15px;
    }
  }
  //Box Category
  .box-content, .box-category{
    li a {
      padding: 11px 25px 11px 12px;
      transition: background-color .2s, color .2s;
      border-bottom-width: 1px;
      border-bottom-color: $f4;
      border-bottom-style: solid;
      display:block;
      background-color: $f4;
      position: relative;
    }
    li a.active {
      font-weight: normal;
      color: $red;
      background-color: white;
    }
    li ul {
      display: none;
      margin-bottom: 0;
      li a{
        padding-left: 15px;
      }
    }
    li a.active + ul {
      display: block;
    }
    li a:before{
      font-size: 15px;
      position: relative;
      float: left;
      margin-right: 5px;
    }
  }
  .box-content > ul > li, .box-category > ul > li{
    &:last-of-type > a{
      border-bottom: 0 !important;
    }
  }
  /******************************
 SIDE CATEGORY
*******************************/

  .side-category{
    i{
      text-align: center;
      font-size: 18px;
      position: absolute;
      top: 5px;
      right: 7px;
    }
  }

  //Accordion
   .side-category-accordion{
     i{
       background-color: $e4;
       line-height: 100%;
       width: 20px;
       height: 20px;
       top: 8px;
       transition: background-color 0.2s, color 0.2s;
     }
     .box-category > ul li ul li{
       a{
         padding-left: 20px;
       }
       ul li{
         a{
           padding-left: 25px;
         }
         ul li{
           a{
             padding-left: 30px;
           }
           ul li{
             a{
               padding-left: 35px;
             }
             ul li{
               a{
                 padding-left: 40px;
               }
               ul li{
                 a{
                   padding-left: 45px;
                 }
                 ul li{
                   a{
                     padding-left: 50px;
                   }
                 }
               }
             }
           }
         }
       }
     }
     .box-category li ul li a:before{
       float: none;
       content: "";
     }
   }

//Opencart modules
.oc-module{
  overflow: hidden;
  .product-wrapper{
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    transition: all 0;
    .p-over{
      display: none;
    }
  }
  .product-wrapper:hover{
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .product-details{
    background-color: transparent;
    padding-bottom: 0;
    float: left;
    max-width: 134px;
  }
  .product-details:before{
    content: "";
  }

  .product-grid-item{
    .quickview-button{
      display: none;
    }

    width: 100%;
    display: inline-block;
    padding: 5px;
    border-bottom: 1px solid $e4;
    background-color: $f4;
    margin-bottom: 0;
    text-align: left;

    .image {
      display: block;
      float: left;
      margin: 3px;
      position: relative;
      width: auto;
      span{
        display: none !important;
      }
      a{
        background: transparent !important;
        margin-right: 5px;
        line-height: 100%;
        border-radius: 0;
        border: none;
      }
      img {
        border:0;
        display: block;
        padding: 0;
        max-width: 50px;
      }
    }
    .name {
      position: relative;
      a {
        font-size: 12px;
        text-decoration: none;
        display: block;
        text-align: left;
        padding: 3px 0 2px 0;
      }
    }
    .sale{
      display: none;
    }
    .price {
      display: inline-block;
      font-weight: bold;
      font-size: 13px;
      padding: 0;
      text-align: left;
      border: none;
      margin-bottom: 4px;
      background-color: transparent;
      border-radius: 0;
    }
    .price-old {
      font-weight: normal;
      color: $red;
      padding-right: 2px;
      text-decoration: line-through;
      font-size: 12px;
    }
    .price-new {
      font-weight: bold;
      font-size: 13px;
    }
    .rating {
      position: relative;
      margin: 0;
      left: 0;
      top: 0;
      padding: 0;
    }
    .cart {
      display: none;
    }
    .cart input {
      color: white;
      font-family:$sans;
      text-transform: none;
      font-weight: bold;
    }
  }
  .product-grid-item:last-of-type{
    border-bottom: none;
  }
}

/******************************
 CAROUSEL MODULE
*******************************/
  .journal-carousel{
    .product-wrapper{
      box-shadow: none;
    }

    .owl-controls{
      overflow: visible;
    }

    .owl-buttons{
     // -webkit-backface-visibility: hidden;
      opacity: 0;
      visibility: hidden;
      div{
        margin-top: -80px;
      }
    }

    &:hover .owl-buttons{
      visibility: visible;
      opacity: 1;
      transition: opacity 0.2s;
    }

    //Tabs
    .htabs{
      a{
        width: 100%;
        text-align: left;
        border-bottom: 1px solid $gray;
        border-right: none;
      }
      a:last-of-type{
        border-bottom: none;
      }
    }
    .htabs.single-tab{
      a, a.selected, a:hover{
        border-bottom: none;
      }
    }
  }


  /******************************
   TEXT ROTATOR
  *******************************/

  .quote {
   padding-bottom: 30px;
  }

  .rotator-image{
    float: none !important;
    margin: 10px auto 0 auto !important;
  }

  .quovolve-nav {
    bottom: 4px;
    left: 0;
    width:100%;
    text-align: center;
    ul, ol{
      margin: 0;
      padding: 0;
      display: inline-block;
    }
  }

  /******************************
   PHOTO GALLERY
  *******************************/

  .journal-gallery{
    margin-bottom:0;
    overflow: hidden;
    .box-heading{
      margin-bottom: 15px;
    }
    .box-content{
      margin-right: -15px;
    }
  }

  .gallery-thumb a:before{
    font-size: 22px;
    margin-left: -10px;
    margin-top: -12px;
  }

  /******************************
   CMS BLOCKS
  *******************************/
  .cms-block, .static-banner{
    margin-bottom: $margin;
    &:last-of-type{
      margin-bottom: 0;
    }
  }
  .cms-blocks{
    .box-heading{
      margin-bottom:0;
    }
    .block-content{
      height: auto !important;
    }
  }
  .static-banners.box{
    background-color: transparent;
  }
}


.extended-layout{
  #column-right, #column-left{
    .journal-gallery .box-content{
      padding: 10px;
      padding-top: 0;
    }
    .box{
      &:last-of-type{
        margin-bottom: $margin;
      }
    }
  }
}

.side-column{
  .oc-module .inline-button br{
    display: none;
  }
  .box.journal-carousel{
    background-color: transparent;
    margin-bottom: 10px;
    .htabs{
      margin-bottom: 0;
    }
    .owl-pagination{
      margin-bottom: 0;
    }
    .owl-buttons div{
      top: -35px;
      margin-top: 0;
    }
    .owl-buttons.side-buttons div{
      top: 50%;
      margin-top: -90px;
    }
  }
}
